<template>
    <div class=''>
        <div v-for="item in imgListArr">
            <img v-lazy="item" alt="" style="width:600px;height: 800px;">
        </div>
    </div>
</template>

<script lang='ts' setup>

import { ref, reactive, toRefs, type Directive } from 'vue';
// 引入多个文件 import.meta.glob  懒加形式     eager: true 静态加载
let imgList: Record<string, { default: string }> = import.meta.glob('../assets/vLazyimg/*.*', { eager: true })
// console.log('===>',imgList);  值是模块
// 导出路径
let imgListArr = Object.values(imgList).map(v => v.default)
// 自定义指定
console.log('===>', imgListArr);
let vLazy: Directive<HTMLImageElement, string> = (el, bingding) => {


    //监听元素
    const observer = new IntersectionObserver((enr) => {

        if (enr[0].intersectionRatio > 0) {
            setTimeout(() => {
                el.src = bingding.value
                // 关闭监听
                observer.unobserve(el)
            }, 3000)

        }
    })
    //   监听元素
    observer.observe(el)
}
</script>

<style scoped lang='less'></style>